<template>
    <div class="com-container">       
        <!-- 显示图表 -->
        <div class="com-chart" ref="rank_ref">

        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            chartInstance:null,
            //服务器获取数据
            allData:null,
            startValue:0,//平移起点
            endValue:9,//平移终点
            //定时器标识
            timeId:null
            
        }
    },
    created(){
        //回调函数的注册
        this.$socket.registerCallBack('rankData',this.getData)
    },
    mounted() {
        this.initChart()
        // this.getData()
        //获取数据 发送数据给服务器
        this.$socket.send({
            action:'getData',
            socketType:'rankData',
            chartName:'rank',
            value:''
        })
        //分辨率适配
        window.addEventListener('resize',this.screenAdapter)
        this.screenAdapter()
    },
    destroyed(){
        //取消监听
        window.removeEventListener('resize', this.screenAdapter)
        clearInterval(this.timeId)
        //回调函数的取消
        this.$socket.unRegisterCallBack("rankData")
    },
    methods: {
         initChart(){
            this.chartInstance = this.$echarts.init(this.$refs.rank_ref,this.theme)
            const initOption = {
                title:{
                    text:'▎地区销售排行',
                    left:20,
                    top:20,
                },
                grid: {//图标离容器的距离
                    top: '40%',
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    // 把x轴和y轴纳入 grid
                    containLabel: true
                },
                tooltip:{
                    show:true
                },
                xAxis:{
                    type:'category',
                },
                yAxis:{
                    type:'value'
                },
                series:[
                    {
                        //柱状图
                        type:'bar'
                }]
            }
            this.chartInstance.setOption(initOption)
            this.chartInstance.on('mouseover', () => {
                 clearInterval(this.timeId)
            })
            this.chartInstance.on('mouseout', () => {
                this.startInterval()
            })
         },
         async getData(res){
                // const {data:res} =  await this.$http.get('rank')
                this.allData = res
                this.allData.sort((a,b)=>{return b.value - a.value})//排序
                console.log(this.allData)
                this.updateChart()
                this.startInterval()
         },
         updateChart(){
            // 渐变颜色
            const colorArr = [
                ['#0BA82C', '#4FF778'],
                ['#2E72BF', '#23E5E5'],
                ['#5052EE', '#AB6EE5']
            ]
            //处理数据
            //所有省份的数组
            const provinceArr = this.allData.map(item=>{
                return item.name
            })
            //所有省份数据
            const valueArr  = this.allData.map(item=>{
                return item.value
            })
            const dataOption = {
                xAxis:{
                    data:provinceArr
                },
                dataZoom:{
                    //数据缩放
                    show:false,
                    startValue:this.startValue,//起始点
                    endValue:this.endValue,
                },
                series:[
                    {
                        data:valueArr,
                        itemStyle:{
                            color:arg=>{
                                let targetColorArr = []
                                // console.log(arg)
                                if(arg.value>230){
                                    targetColorArr = colorArr[0]
                                }else if(arg.value>170){
                                    targetColorArr = colorArr[1]
                                }else{
                                    targetColorArr = colorArr[2]
                                }
                                return new this.$echarts.graphic.LinearGradient(0,0,0,1,[
                                     // 0%
                                    { offset: 0, color: targetColorArr[0] },
                                      // 100%
                                    { offset: 1, color: targetColorArr[1] }
                                ])
                            }
                        }
                    }
                ]
            }
            this.chartInstance.setOption(dataOption)
         },
         screenAdapter(){
            const titleFontSzie = this.$refs.rank_ref.offsetWidth / 100 * 3.6
            const adapterOption = {
                title: {
                textStyle: {
                    fontSize: titleFontSzie
                }
              },
                series: [
                {
                    barWidth: titleFontSzie,
                    itemStyle: {
                    barBorderRadius: [titleFontSzie / 2, titleFontSzie / 2, 0, 0]
                    }
                }]
            }
            this.chartInstance.setOption(adapterOption)
            this.chartInstance.resize()
         },
         //平移定时器
         startInterval(){
            if(this.timeId){
                clearInterval(this.timeId)
            }
            this.timeId = setInterval(()=>{
                this.startValue++
                this.endValue++
                if(this.endValue > this.allData.length - 1){
                    this.startValue = 0
                    this.endValue =9
                }
                this.updateChart()
            },2000)
         }
    },
    computed: {
    ...mapState(['theme'])
  },
  watch: {
    theme () {
      console.log('主题切换了')
      this.chartInstance.dispose() // 销毁当前的图表
      this.initChart() // 重新以最新的主题名称初始化图表对象
      this.screenAdapter() // 完成屏幕的适配
      this.updateChart() // 更新图表的展示
    }
  }
}
</script>

<style>

</style>